<template>
  <div class="tool-card" @click="toolClick(type,count,able)">
    <img class="card-image" :src="images[type]" alt="">
    <span class="badge" v-if="count">{{count}}</span>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  export default {
    name: 'tool-card',
    props: {
      type: Number,
      count: Number,
      able: Boolean
    },
    data: function () {
      return {
        images: [
          './static/images/clear-wrong-btn.png',
          './static/images/increase-time-btn.png',
          './static/images/skip-btn.png',
          './static/images/double-score-btn.png'
        ],
        cardKeys: []
      }
    },
    methods: {
      toolClick(type,count,able){
        if(!count||!able)return;
        console.log(type)
        axios.get('/gxtest/useProp',{params:{type:type+1}}).then(res=>{
          if(type==0){
            //去错卡
            this.$store.commit('useCard','pickerrorcardnum')
            this.$emit('clearWrong')
          }else if (type==1){
            //加时卡
            this.$store.commit('useCard','addtimecardnum')
          }else if(type==2){
            this.$store.commit('useCard','passcardnum')
            this.$emit('skipQuestion')
          }else if(type==3){
            this.$store.commit('useCard','doublescorecardnum')
            this.$store.commit('updateAlertData',{visible:1,text:'双倍卡使用成功!'})
          }
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .tool-card
    position: relative
    .card-image
      width:100%
    .badge
      position: absolute
      top: -1vw
      right -1vw
      font-size: 8px
      text-align center
      line-height 4vw
      border-radius 2vw
      color: #fff
      display: block
      width: 4vw
      height: 4vw
      background-color: red
</style>
